<%@page import="java.util.Date" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
         deferredSyntaxAllowedAsLiteral="true" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml" %>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <%@include file="../../../resources/inc/head.jsp" %>
</head>
<body style="overflow: auto">

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-row layui-col-space15">

                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">交易统计</div>
                        <div class="layui-card-body">
                            <div class="layui-carousel layadmin-carousel layadmin-backlog">
                                <div class="layui-form">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">完成时间:</label>
                                        <div class="layui-inline">
                                            <input type="text" class="layui-input" name="startTime" id="startTime"
                                                   placeholder="yyyy-MM-dd">
                                        </div>
                                        <div class="layui-inline">
                                            <input type="text" class="layui-input test-item" name="endTime" id="endTime"
                                                   placeholder="yyyy-MM-dd">

                                        </div>
                                        <div class="layui-inline">
                                            <button class="layui-btn layui-btn-primary layui-btn-radius" lay-submit
                                                    lay-filter="yesterday">昨天
                                            </button>
                                            <button class="layui-btn layui-btn-primary layui-btn-radius" lay-submit
                                                    lay-filter="today">
                                                今天
                                            </button>
                                            <button class="layui-btn layui-btn-primary layui-btn-radius" lay-submit
                                                    lay-filter="mouth">
                                                本月
                                            </button>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label"><span class="require-field"></span> </label>
                                        <div class="layui-inline">
                                            <input type="text" id="merchantNo" name="merchantNo" placeholder="请输入商户号"
                                                   autocomplete="off" class="layui-input">
                                        </div>
                                        <div class="layui-inline">
                                            <select name="channels" lay-filter="channels">
                                                <option value="0">请选择支付通道</option>
                                                <c:forEach items="${channels}" var="channel">
                                                    <option value="${channel.id}">${channel.name}</option>
                                                </c:forEach>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label"><span class="require-field"></span> </label>
                                        <div class="layui-inline">
                                            <button class="layui-btn" lay-submit="" lay-filter="demo1">查询</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-md12">
            <div class="layui-card">
                <table class="layui-table" id="table1">
                    <div class="layui-card-header" id="head">
                        总笔数:${totalSum}笔&nbsp&nbsp订单金额:￥${grandTotalSum }&nbsp&nbsp手续费:￥${serviceFeeSum}&nbsp&nbsp结算金额:￥${bargainSum}</div>
                    <colgroup>
                        <%-- <col width="150">
                         <col width="150">
                         <col width="200">
                         <col>--%>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>商户名</th>
                        <th>支付类型${startTime}</th>
                        <th>支付通道</th>
                        <th>笔数</th>
                        <th>订单金额</th>
                        <th>成功笔数</th>
                        <th>成功金额</th>
                        <th>手续费</th>
                    </tr>
                    </thead>
                    <tbody id="tBody">
                    <div>
                        <c:if test="${tradeStatistics[0]==null}">
                            <tr>
                                <td>暂无数据</td>
                                <td>暂无数据</td>
                                <td>暂无数据</td>
                                <td>0</td>
                                <td>￥0</td>
                                <td>0</td>
                                <td>￥0</td>
                                <td>￥0</td>
                            </tr>
                        </c:if>
                        <c:if test="${tradeStatistics[0]!=null}">
                            <c:forEach items="${tradeStatistics}" var="tradeStatistic">
                                <tr>
                                    <td>${tradeStatistic.merchant}</td>
                                    <td>${tradeStatistic.orderType}</td>
                                    <td>${tradeStatistic.channelPayway}</td>
                                    <td>${tradeStatistic.sum}</td>
                                    <td>￥${tradeStatistic.grandTotal}</td>
                                    <td>${tradeStatistic.successSum}</td>
                                    <td>￥${tradeStatistic.successTotal}</td>
                                    <td>￥${tradeStatistic.serviceFee}</td>
                                </tr>
                            </c:forEach>
                        </c:if>
                    </div>
                    </tbody>
                </table>
            </div>
        </div>


    </div>
</div>

<%@include file="../../../resources/inc/footer.jsp" %>

<script>
    layui.config({
        base: '<%=basePath%>resources/lib/layuiAdmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'console', 'layer', 'table', 'laydate'], function () {
        var $ = layui.$
            , form = layui.form
            , table = layui.table,
            laydate = layui.laydate;
        //日期时间选择器
        var today = new Date().setHours(0, 0, 0, 0);
        var night = today + (24 * 60 * 60 * 1000 - 1);
        laydate.render({
            elem: '#startTime'
            , type: 'datetime'
            , format: 'yyyy-MM-dd'
            , value: new Date(today)
        });
        laydate.render({
            elem: '#endTime'
            , type: 'datetime'
            , format: 'yyyy-MM-dd'
            , value: new Date(night)
        });
        //监听提交
        form.on('submit(demo1)', function (data) {
            var field = data.field;
            var sTime = field.startTime;
            var eTime = field.endTime;
            sTime = sTime.replace(/-/g, '/');
            var startTime = new Date(sTime).getTime();
            eTime = eTime.replace(/-/g, '/');
            var endTime = new Date(eTime).getTime();
            if (startTime > endTime) {
                return layer.msg("开始时间不能大于结束时间")
            }
            layer.load(2)
            $.ajax({
                url: "<%=basePath%>manager/dataStatistics/dataStatistics.html",
                type: "POST",
                data: {startTime: startTime, endTime: endTime, channel: field.channels, merchantNo: field.merchantNo},
                dataType: "JSON",
                success: function (data) {
                    layer.closeAll('loading');
                    $('#head').empty()
                    $('#tBody').empty()
                    if (data.success) {
                        var model = data.data.model;
                        var tradeStatistics = model.tradeStatistics
                        $('#head').html("总笔数:" + model.totalSum + "笔&nbsp&nbsp订单金额:￥" + model.grandTotalSum + "&nbsp&nbsp手续费:￥" + model.serviceFeeSum + "&nbsp&nbsp结算金额:￥" + model.bargainSum)
                        for (var e in tradeStatistics) {
                            $("#tBody").append("<tr>")
                            $("#tBody").append("<td>" + tradeStatistics[e].merchant + "</td>")
                            $("#tBody").append("<td>" + tradeStatistics[e].orderType + "</td>")
                            $("#tBody").append("<td>" + tradeStatistics[e].channelPayway + "</td>")
                            $("#tBody").append("<td>" + tradeStatistics[e].sum + "</td>")
                            $("#tBody").append("<td>￥" + tradeStatistics[e].grandTotal + "</td>")
                            $("#tBody").append("<td>" + tradeStatistics[e].successSum + "</td>")
                            $("#tBody").append("<td>￥" + tradeStatistics[e].successTotal + "</td>")
                            $("#tBody").append("<td>￥" + tradeStatistics[e].serviceFee + "</td>")
                            $("#tBody").append("</tr>")
                        }
                    } else {
                        $('#head').html("总笔数:0笔&nbsp&nbsp订单金额:￥0&nbsp&nbsp手续费:￥0&nbsp&nbsp结算金额:￥0")
                        $("#tBody").append("<tr>")
                        $("#tBody").append("<td>暂无数据</td>")
                        $("#tBody").append("<td>暂无数据</td>")
                        $("#tBody").append("<td>暂无数据</td>")
                        $("#tBody").append("<td>0</td>")
                        $("#tBody").append("<td>￥0</td>")
                        $("#tBody").append("<td>0</td>")
                        $("#tBody").append("<td>￥0</td>")
                        $("#tBody").append("<td>￥0</td>")
                        $("#tBody").append("</tr>")
                    }
                }
            });

        });
        //更改时间
        form.on('submit(yesterday)', function (data) {
            var date = new Date();
            date.setTime(today - 1);
            $('#endTime').val(date.Format("yyyy-MM-dd hh:mm:ss"))
            date.setTime(today - (24 * 60 * 60 * 1000));
            $('#startTime').val(date.Format("yyyy-MM-dd hh:mm:ss"))
        });
        form.on('submit(today)', function (data) {
            var date = new Date();
            date.setTime(today);
            $('#startTime').val(date.Format("yyyy-MM-dd hh:mm:ss"))
            date.setTime(night);
            $('#endTime').val(date.Format("yyyy-MM-dd hh:mm:ss"))
        });
        form.on('submit(mouth)', function (data) {
            var mouth = new Date();
            mouth.setDate(1);
            mouth.setHours(0);
            mouth.setSeconds(0);
            mouth.setMinutes(0);
            $('#startTime').val(mouth.Format("yyyy-MM-dd hh:mm:ss"))
            var date = new Date();
            date.setTime(today + (24 * 60 * 60 * 1000 - 1));
            $('#endTime').val(date.Format("yyyy-MM-dd hh:mm:ss"))
        });
    });
</script>
</body>
</html>


